<script setup lang="ts">
defineOptions({
  name: "UserInfo"
});

import { onMounted, reactive, ref } from "vue";
import { useRoute } from "vue-router";
import { userDetail, editBalance } from "@/api/user";
import {
  getContainer,
  getUserLog,
  selectServer,
  selectServerPlan
} from "@/api/server";
import { message } from "@/utils/message";
import { get } from "sortablejs";
const route = useRoute();
onMounted(async () => {
  console.log("用户id", route.query.user_id);
  let res = await userDetail({ user_id: route.query.user_id });
  userInfo.value = res.data.data;
  console.log("用户信息", userInfo.value);
  getProduct();
  getLog();
});

//用户基本信息
const userInfo = ref({});
//容器信息
const productTotal = ref(0);
const containerBox = reactive({
  server_id: "",
  page: 1,
  count: 10,
  key: "",
  user_id: route.query.user_id
});
const logTotal = ref(10);
const logPagin = reactive({
  page: 1,
  count: 10,
  user_id: route.query.user_id
});
//获取用户日志
const getLog = async () => {
  let res = await getUserLog(logPagin);
  console.log("用户日志", res);
  user_log.value = res.data.data;
  logTotal.value = res.data.count;
};
const handleCurrentPageChange = async newPage => {
  logPagin.page = newPage;
  getLog();
};
const handlePageSizeChange = async newSize => {
  logPagin.count = newSize;
  getLog();
};
const handleProductPageChange = async newPage => {
  containerBox.page = newPage;
  getProduct();
};
const handleProductPageSizeChange = async newSize => {
  containerBox.count = newSize;
  getProduct();
};
const getProduct = () => {
  getContainer(containerBox).then(async res => {
    if (res.data.code == 200) {
      productTotal.value = res.data.count;
      let info = res.data.data;
      console.log("容器信息", info);
      info = await Promise.all(
        info.map(async item => {
          let res = await selectServer({ server_id: item.server_id });
          let res2 = await selectServerPlan({
            plan_id: item.plan_id,
            server_type: "dockerContainer"
          });
          let server_name = res.data.data.name;
          let plan_name = res2.data.data.name;
          return {
            ...item,
            server_name,
            plan_name
          };
        })
      );
      product_list.value = info;
      console.log("新的数据", info);
    }
  });
};

//修改余额
const handleChange = () => { };
const changeNum = async () => {
  if (money_form.change_type == "add") {
    userInfo.value.balance =
      parseFloat(money_form.num) + parseFloat(userInfo.value.balance);
  } else if (money_form.change_type == "low") {
    userInfo.value.balance =
      parseFloat(userInfo.value.balance) - parseFloat(money_form.num);
  } else {
    userInfo.value.balance = parseFloat(money_form.num);
  }
  let res = await editBalance(userInfo.value);
  if (res.data.code == 200) {
    message("修改成功", { type: "success" });
    centerDialogVisible.value = false;
  }
};
const centerDialogVisible = ref(false);

const money_form = reactive({
  num: 0,
  change_type: "",
  change_types: [
    {
      value: "add",
      label: "增加"
    },
    {
      value: "low",
      label: "减少"
    },
    {
      value: "cover",
      label: "覆盖"
    }
  ]
});

const user_log = ref([]);
const product_list = ref([]);
</script>

<template>
  <div class="body">
    <el-descriptions title="用户信息" direction="vertical" :column="4" size="default" border>
      <el-descriptions-item label="用户名">{{
        userInfo.username
        }}</el-descriptions-item>
      <el-descriptions-item label="手机号码">{{
        userInfo.phone
        }}</el-descriptions-item>
      <el-descriptions-item label="邮箱" :span="2">{{
        userInfo.email
        }}</el-descriptions-item>
      <el-descriptions-item label="注册时间">
        <el-tag size="small">{{ userInfo.reg_time }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="账户余额">
        {{ userInfo.balance }} 元
        <el-button type="primary" @click="centerDialogVisible = true">修改</el-button>
      </el-descriptions-item>
      <el-descriptions-item label="姓名">{{
        userInfo.name
        }}</el-descriptions-item>
      <el-descriptions-item label="身份证">{{ userInfo.card_id }}
      </el-descriptions-item>
    </el-descriptions>

    <!-- tab栏 -->
    <el-tabs type="border-card" class="info_table">
      <el-tab-pane label="用户日志">
        <el-table :data="user_log" style="width: 100%">
          <el-table-column prop="created_at" label="时间" />
          <el-table-column prop="action" label="操作" />
        </el-table>
        <el-pagination background layout="prev, pager, next,sizes" :total="logTotal" :current-page="logPagin.page"
          :page-size="logPagin.count" :page-sizes="[5, 10, 20]" @update:current-page="handleCurrentPageChange"
          @update:page-size="handlePageSizeChange" />
      </el-tab-pane>
      <el-tab-pane label="用户产品">
        <el-table class="table_el" :data="product_list" style="width: auto">
          <el-table-column label="ID" prop="container_id" />
          <el-table-column label="购买价格" prop="pay" />
          <el-table-column label="购买时间" prop="created_at" />
          <el-table-column label="到期时间" prop="become_time" />
          <el-table-column label="所属套餐" prop="plan_name" />
          <el-table-column label="所属服务器" prop="server_name" />
          <el-table-column width="230">
            <template #header>
              <el-input v-model="containerBox.key" size="small" placeholder="关键字筛选" />
            </template>
            <template #default="scope">
              <el-button size="small"><router-link :to="'/servers/containers?container_id=' + scope.row.container_id
                ">管理</router-link></el-button>
            </template>
          </el-table-column>
        </el-table>

        <!--分页-->
        <el-pagination background layout="prev, pager, next,sizes" :total="productTotal"
          :current-page="containerBox.page" :page-size="containerBox.count" :page-sizes="[1, 5, 10]"
          @update:current-page="handleProductPageChange" @update:page-size="handleProductPageSizeChange" />
      </el-tab-pane>
    </el-tabs>

    <!-- 余额修改 -->
    <el-dialog v-model="centerDialogVisible" title="修改余额" width="500" center>
      <div>
        <el-form label-width="auto" :model="money_form" style="max-width: 600px">
          <el-form-item label="余额">
            <el-input v-model="money_form.num" type="number" width="20px" />
          </el-form-item>
          <el-form-item label="修改方式">
            <el-select v-model="money_form.change_type" placeholder="请选择" style="width: 240px" @change="handleChange()">
              <el-option v-for="item in money_form.change_types" :key="item.value" :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="备注">
            <el-input v-model="money_form.other" />
          </el-form-item> -->
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="changeNum"> 提交 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.el-descriptions {
  margin-top: 20px;
}

.info_table {
  margin: 20px 0;
}
</style>
